//
// Basic layout and styles for site
//


header[role=banner] {
  background: $banner-color;
  @include background-image(
    linear-gradient(rgba(black, 0) 0%, rgba(black, 0) 80%, rgba(black, 0.15) 100%),
    radial-gradient(30% 50px, $banner-color, darken($banner-color, 11) 400px)
  );
  padding: 20px $body-margin-x;
  position: relative;
  
  a { @include basic-link(mix($banner-color, white, 20%), $hover: white, $decoration: "plain"); }
  
  .action-link {
    position: absolute;
    right: $body-margin-x;
    top: 55px;
    a {
      background: rgba(white, 0.1);
      @include border-radius;
      display: block;
      padding: 0.5em 1em;
      @include text-shadow(mix($banner-color, black, 50%) 0 1px 0);
      &:after { content: " ⇢"; }
    }
  }
}

section[role=main] {
  padding: 1px $body-margin-x;
}

body > footer {
  padding: 0 $body-margin-x 20px;
  font-size: 90%;
  color: $quiet-color;
  a { @include basic-link($text-color); }
  p { margin: 1em 0; }
}